<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建联系人</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		<style type="text/css">
			#app{
				background:#F1F1F1;
			}
			.box{
				text-align: center;
			}
			.smallbox{
				text-align: center;
			}
			.smallbox .el-col{
				width:350px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>联系人</h3>
			<hr />
			<div class="box"><p>————————————联系人————————————</p></div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
				<div class="smallbox">
				<el-row>
				<el-col :span="8">
					<el-form-item label="姓名:" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="移动电话:" prop="phone">
					<el-input v-model.number="ruleForm.phone"/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				<el-form-item label="上级联系人:" prop="counterpart">
				<el-autocomplete v-model.trim="ruleForm.counterpart" placeholder="请输入内容" >
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-autocomplete>
				</el-form-item>
			</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row>
			<el-col :span="8">
				<!-- 性别字典表1004-->
					<el-form-item label="性别:" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio label="1005">男</el-radio>
						<el-radio label="1006">女</el-radio>
					</el-radio-group>
					</el-form-item>
			</el-col>
			<el-col :span="8">
					<el-form-item label="联系人分类:" prop="catalogue">
					<el-select v-model="ruleForm.catalogue" placeholder="请选择联系人分类" style="width:250px">
						<el-option label="特别重要" value="1001">特别重要</el-option>
						<el-option label="重要" value="1002">重要</el-option>
						<el-option label="普通" value="1003">普通</el-option>
						<el-option label="不重要" value="1004">不重要</el-option>
						<el-option label="失效" value="1005">失效</el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="负责业务: "  prop="operations">
					<el-input v-model="ruleForm.operations"/>
					</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="称谓:" prop="appellation">
				<el-input v-model="ruleForm.appellation"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
					<el-form-item label="证件类型:" prop="dtype">
					<el-select v-model="ruleForm.dtype" placeholder="请选择证件类型" style="width:250px">
						<el-option label="身份证" value="1008"></el-option>
						<el-option label="军官证" value="1009"></el-option>
						<el-option label="护照" value="1010"></el-option>
						<el-option label="其他" value="1011"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="证件号码:" prop="dnumber">
					<el-input v-model.number="ruleForm.dnumber"/>
					</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="box"><p>————————————联系方式————————————</p></div>
			<div class="smallbox">
			<el-row>
				<el-col :span="8">
					<el-form-item label="电子邮箱:" prop="email">
					<el-input v-model.number="ruleForm.email"/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="邮编:" prop="code">
					<el-input v-model.number="ruleForm.code"/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="地址:" prop="address">
			<el-input v-model="ruleForm.address"></el-input>
			</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="box"><p>—————————————其他—————————————</p></div>
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="兴趣爱好:" prop="interest">
					<el-select v-model="ruleForm.interest" placeholder="请选择兴趣爱好">
						<el-option label="书法" value="1018"></el-option>
						<el-option label="作画" value="1019"></el-option>
						<el-option label="摄影" value="1020"></el-option>
						<el-option label="户外运动" value="1021"></el-option>
						<el-option label="跑步" value="1022"></el-option>
						<el-option label="旅行" value="1023"></el-option>
						<el-option label="音乐" value="1024"></el-option>
						<el-option label="影视" value="1025"></el-option>
						<el-option label="书籍" value="1026"></el-option>
						<el-option label="烹饪" value="1027"></el-option>
						<el-option label="美食" value="1028"></el-option>
						<el-option label="烘焙" value="1029"></el-option>
						<el-option label="其他" value="1030"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="备注:" prop="remarks">
					<el-input v-model.number="ruleForm.remarks"/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="习惯:" prop="habit">
					<el-select v-model="ruleForm.habit" placeholder="请选择习惯">
						<el-option label="抽烟" value="1013"></el-option>
						<el-option label="红酒" value="1014"></el-option>
						<el-option label="白酒" value="1015"></el-option>
						<el-option label="雪茄" value="1016"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="性格:" prop="character">
					<el-select v-model="ruleForm.character" placeholder="请选择性格">
						<el-option label="内向" value="1032"></el-option>
						<el-option label="外向" value="1033"></el-option>
						<el-option label="理智型" value="1034"></el-option>
						<el-option label="疑虑型" value="1035"></el-option>
						<el-option label="情绪型" value="1036"></el-option>
						<el-option label="急脾气" value="1037"></el-option>
						<el-option label="慢性子" value="1038"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="社交特点:" prop="social">
					<el-select v-model="ruleForm.social" placeholder="请选择社交特点" style="width:270px">
						<el-option label="接收新事物能力强" value="1040"></el-option>
						<el-option label="不易接收新事物" value="1041"></el-option>
						<el-option label="理解能力弱" value="1042"></el-option>
						<el-option label="新技能掌握快" value="1043"></el-option>
						<el-option label="新技能掌握慢" value="1044"></el-option>
						<el-option label="自学意识强" value="1045"></el-option>
						<el-option label="自学意识弱" value="1046"></el-option>
						<el-option label="容易沟通" value="1047"></el-option>
						<el-option label="不易沟通" value="1048"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="年收入:" prop="income">
					<el-select v-model="ruleForm.income" placeholder="请选择年收入">
						<el-option label="无" value="1050"></el-option>
						<el-option label="小于50k" value="1051"></el-option>
						<el-option label="小于100k" value="1052'"></el-option>
						<el-option label="小于150k" value="1053"></el-option>
						<el-option label="小于200k" value="1054"></el-option>
						<el-option label="大于200k" value="1055"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="消费习惯:" prop="conhabit">
					<el-select v-model="ruleForm.conhabit" placeholder="请选择消费习惯">
						<el-option label="稳健谨慎" value="1057"></el-option>
						<el-option label="品牌高质" value="1058"></el-option>
						<el-option label="偏好奢侈" value="1059"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="人员规模:" prop="persize">
					<el-select v-model="ruleForm.persize" placeholder="请选择人员规模"  style="width:270px">
						<el-option label="10人以内" value="1061"></el-option>
						<el-option label="10-20人" value="1062"></el-option>
						<el-option label="20-50人" value="1063'"></el-option>
						<el-option label="50-200人" value="1064"></el-option>
						<el-option label="200人以上" value="1065"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="网址:" prop="url">
					<el-input v-model.number="ruleForm.url"  style="width:200px"/>
					</el-form-item>
				</el-col>
			<br />
			<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
			</el-form>
		</div>
		
		<script type="text/javascript">
			var Main = {
				data() {
					//验证手机号码
					var checkPhone = (rule, value, callback) => {
					const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
					if (!value) {
						return callback(new Error('电话号码不能为空'))
					}
					setTimeout(() => {
						// Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
						// 所以在前面加了一个+实现隐式转换
						if (!Number.isInteger(+value)) {
						callback(new Error('请输入数字值'))
						} else {
						if (phoneReg.test(value)) {
							callback()
						} else {
							callback(new Error('电话号码格式不正确'))
						}
						}
					}, 100)
					};
					
					//验证电子邮箱
					var checkEmail = (rule, value, callback) => {
						const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
						if (!value) {
							return callback(new Error('邮箱不能为空'))
						}
						setTimeout(() => {
							if (mailReg.test(value)) {
							callback()
							} else {
							callback(new Error('请输入正确的邮箱格式'))
							}
						}, 100)
					}
					return {
					ruleForm: {
						input21:'',
						name: '',
						tel: '',
						counterpart: 0,
						catalogue: '',
						operations:'',
						sex:0,
						appellation:'',
						email:'',
						code:'',
						address:'',
						dtype:'',
						dnumber:'',
						merday:'',
						habit:'',
						interest:'',
						character:'',
						social:'',
						income:'',
						conhabit:'',
						persize:'',
						url:'',
						remarks:'',
					},
					rules: {
						name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
						],
						catalogue: [
						{ required: true, message: '请选择联系人分类', trigger: 'change' }
						],
						email: [
							{ required: true, validator: checkEmail, trigger: 'blur' }
						],
						phone: [
							{ required: true, validator: checkPhone, trigger: 'blur' }
						],
						counterpart: [
						{ required: true, message: '上级联系人不能为空', trigger: 'change' }
						],
						sex:[
						{ required: true, message: '请选择性别', trigger: 'change' }
						],
					}
					};
				},
				methods: {
					submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
						alert('submit!');
						//post提交数据
						axios.post('/customer/newContacts',
								//参数转换
								Qs.stringify(this.ruleForm,{arrayFormat:'brackets'})
								//params:
									//ajax请求成功的回调函数
						).then(function(v){
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v);
						}).catch(function(){
							alert("出错了！");
						});
						} else {
						console.log('error submit!!');
						return false;
						}
					});
					},
					resetForm(formName) {
					this.$refs[formName].resetFields();
					}
				}
				}
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>
</html>